::-webkit-scrollbar {
    width : 8px;
    height: 8px;
}

::-webkit-scrollbar-thumb {
    border-radius   : 2px;
    background-color: var(--primary-50, #faa482);
}

::-webkit-scrollbar-track {
    border-radius   : 2px;
    background-color: rgba(255, 255, 255, 0);
}

.pre-wrap {
    .var-primary(@primary: #705697; @primary-weak: #9c7ace) {
        --primary        : @primary;
        --primary-70     : fade(@primary, 70%);
        --primary-50     : fade(@primary, 50%);
        --primary-30     : fade(@primary, 30%);
        --primary-weak   : @primary-weak;
        --primary-weak-50: fade(@primary-weak, 50%);
    }

    .var-theme(@body-color: #7B7B7D; @body-bg-color: #00151f; @theme-color: #00283a; @theme-bg-color: #f9f9f9; @theme-bg2-color: #f4f5f7) {
        --body-color       : @body-color;
        --body-color-5     : fade(@body-color, 5%);
        --body-bg-color    : @body-bg-color;
        --theme-color      : @theme-color;
        --theme-bg-color   : @theme-bg-color;
        --theme-bg-color-80: fade(@theme-bg-color, 80%);
        --theme-bg2-color  : @theme-bg2-color;
    }

    // base
    .var-primary();
    .var-theme();

    --box-shadow   : 0 2px 4px -2px rgba(0, 0, 0, 0.15);
    --box-shadow2  : inset 0 0 4px -1px rgba(0, 0, 0, 0.15);
    --border-dotted: dotted 2px rgba(225, 225, 235, 0.9);

    // preloader
    --preloader-background: #00283A;

    // top-bar
    --top-bar-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.15);

    // card
    --card-padding      : 40px;
    --card-bottom-card  : 40px;
    --card-border-radius: 10px;
    --card-top-color    : #ffffff;
    --card-top-bg-color : #ff6a00;

    // cover
    --card-cover-bg-color: #e9e9e9;

    // table
    --tabele-thead-bg-color    : rgba(153, 169, 191, .1);
    --tabele-thead-border-color: #eee;

    // tabs
    --tab-border-color          : #f1f1f1;
    --tab-botton-bg-color       : #f1f1f1;
    --tab-botton-color          : #7B7B7D;
    --tab-button-hover-bg-color : #eeeeee;
    --tab-button-active-bg-color: #ffffff;

    // fixed btn
    --fixed-button-bg-color: #ffffff;
    --fixed-button-color   : #7B7B7D;

    // code 
    --code-bg-color: #f1f1f1;
    --code-color   : #476582;

    // notice outdate
    --notice-outdate-bg    : #ffe6e6;
    --notice-outdate-color : #ff6666;
    --notice-outdate-border: #ff8080;

    // scroll progress
    --scroll-progress-bg-color: linear-gradient(#ffdddd, #e9ddff);

    &.dark {
        // base
        .var-primary();
        .var-theme(#cccdcfb3, #00151f, #dedee0, #101014, #02162b);

        --box-shadow   : 0 2px 4px -2px rgba(0, 0, 0, 0.6);
        --box-shadow2  : inset 0 0 4px -1px rgba(0, 0, 0, 0.6);
        --border-dotted: dotted 2px rgba(225, 225, 235, 0.15);

        // preloader
        --preloader-background: #dedee0;

        // top-bar
        --top-bar-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.6);

        // cover
        --card-cover-bg-color: #162e38;

        // table
        --tabele-thead-bg-color    : #525f663d;
        --tabele-thead-border-color: #ffffff1c;

        // tabs
        --tab-border-color          : #063c54;
        --tab-botton-bg-color       : #063c54;
        --tab-botton-color          : #dedee0;
        --tab-button-hover-bg-color : #003146;
        --tab-button-active-bg-color: #042838;

        // fixed btn
        --fixed-button-bg-color: #063c54;
        --fixed-button-color   : #dedee0;

        // code 
        --code-bg-color: #3a3a3a;
        --code-color   : #c9def1;

        // notice outdate
        --notice-outdate-bg    : #403131;
        --notice-outdate-color : #ff6565;
        --notice-outdate-border: #bb1e1e;

        // scroll progress
        --scroll-progress-bg-color: linear-gradient(#82df7a80, #82df7a80);
    }

    .trm-scroll-animation {
        opacity: 1 !important;
    }

    .trm-dark-icon {
        display: none
    }

    &.dark {
        .trm-dark-icon {
            display: block
        }

        .trm-light-icon {
            display: none
        }
    }

    color           : var(--body-color, #7b7b7d);
    background-color: var(--theme-bg-color, #fcfcfe);
}

// transition mixin
.transition-mixin(@type: all; @time: .4s) {
    transition: @type @time ease-in-out;
}

*,
::after,
::before {
    box-sizing: border-box;
}

a,
a:hover {
    color          : inherit;
    text-decoration: none
}

a:focus {
    outline: inherit
}

button {
    cursor: pointer
}

.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
h1,
h2,
h3,
h4,
h5,
h6 {
    line-height   : 1.2;
    letter-spacing: 0;
    font-weight   : 800;
    color         : var(--theme-color, #00283a);
    margin-bottom : 0;
    margin-top    : 0;
}

.h1,
h1 {
    font-size: 2.5rem
}

.h2,
h2 {
    font-size: 2rem
}

.h3,
h3 {
    font-size: 1.75rem
}

.h4,
h4 {
    font-size: 1.5rem
}

.h5,
h5 {
    font-size: 1.25rem
}

.h6,
h6 {
    font-size: 1rem
}

p {
    margin: 0
}

@import "./md.less";